<template>
	<view v-if="show">
		<view class="top_img">
			<u-swiper :list="list1" @change="change" height="750" @click="click"></u-swiper>
			<view class="top_chang">
				{{ cont }}/{{spweiList}}
			</view>
		</view>
		<view class="top_one">
			<image
				src="http://jianshanshuzipingtai.oss-cn-chengdu.aliyuncs.com/2025/01/02/d3b191a593a04e89a95485f2fe4964d2.png"
				mode="aspectFill" class="top_Img"></image>
			<view class="top_zifxl">
				<view class="top_oneflx">
					<view class="flex" style="font-size: 35rpx;">
						<view class="top_oneQian">￥</view>
						<view class="top_onetitle">{{ details.productPrice }}/{{details.specifications}}</view>
					</view>
				</view>
				<view class="top_right">
					<view class="">{{ details.inventory }}</view>
					<view class="">库存</view>
				</view>
			</view>
		</view>
		<view class="two_box">
			<view class="two_title" style="font-weight: 600;">
				{{ details.shopName }}
			</view>
			<view class="two_title" style="height: 40rpx;">
				{{ details.productName }}
			</view>
			<view class="flex-item two_desc">
				<view style="width: 100%;">{{ details.productOrigin }}</view>
			</view>
		</view>
		<view class="three_Gigbox">
			<view class="three_box">
				<view class="three_flx">
					<view class="three_line"></view>
					<view class="three_title">买家评价（{{pinList.total ? pinList.total:0 }}）</view>
				</view>
				<view class="three_flx">
					<view style="font-size: 24rpx;">好评率100%</view>
					<u-icon style="margin-top: 10rpx;" name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="" v-if="pinList.length>0">
				<view class="three_item" v-for="(item,i) in pinList.list" :key="i" >
					<view>
						<view class="flex">
							<view class="three_itemTop">
								<image :src="item.avatar" mode="aspectFill" class="three_itemTopImg"></image>
								<view class="three_itemTopTile">
									<view class="" style="margin-bottom: 10rpx;">{{item.userName}}</view>
									<u-rate :count="count" readonly  activeColor="#FF6200" v-model="item.evaluateLevel" size="15"></u-rate>
								</view>
							</view>
							<view class="three_time">2024-04-28</view>
						</view>
						<view class="three_tetxt">{{item.evaluateContent}}</view>
					</view>
				<view class="" style="display: flex;align-items: center;">
					<image  v-for="url in item.ossUrl"
						:src="url"
						mode="aspectFill" class="three_img"></image>
				</view>
				</view>
			</view>
			
			<view class="three_item" style="height: 100%;" v-else>
				<view>
					<u-empty mode="list" icon="info-circle">
					</u-empty>
				</view>
			</view>
		</view>

		<view class="three_Gigbox">
			<view class="three_box">
				<view class="three_flx">
					<view class="three_line"></view>
					<view class="three_title">商品详情</view>
				</view>
			</view>
			<view class="" style="padding: 40rpx;">
				<u-parse :html="details.productDescribe"></u-parse>
			</view>
		</view>
		<view class="flex-row items-center section_6" style="position: fixed;bottom: 0;width: 100%;">
			<view class="flex-col shrink-0">
				<view class="flex-row">
					<view class="flex-row items-center">
						<image class="image_17" @click="back"
							src="@/static/dianPu.png" />
						<image class="image_18 ml-23"
							src="@/static/kefu.png" />
					</view>
						<view class="ml-30 image_17">
							
						</view>
				</view>
				<view class="mt-2 flex-row">
					<text class="font_3 text_13">主页</text>
					<text class="ml-16 font_3 text_14">客服</text>
					<!-- <text class="ml-16 font_3">购物车</text> -->
					<text class="ml-16 font_3"></text>
				</view>
			</view>
			<view class="ml-32 flex-row flex-1">
				<!-- <view class="flex-col justify-start items-center flex-1 text-wrapper_2" @click="jiaruGouwuche">
					<text class="font_5 text_11">加入购物车</text>
				</view> -->
				<view class="flex-col justify-start items-center flex-1 text-wrapper_2" style="opacity: 0;">
					
				</view>
				<view class="ml-12 flex-col justify-start items-center shrink-0 text-wrapper_3" @click="jiaruOrder">
					<text class="font_5 text_12">立即购买</text>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [],
				cont: 1,
				count: 5,
				value: 2,
				top: 0,
				height: 0,
				shopId:'',
				id: '',
				details: {},
				pinList:null,
				show:false,
				spweiList:1
			}
		},
		onLoad(e) {
			this.id = e.id
			this.shopId = e.shopId
			this.pinglun()
			this.creadDetails()
		},
		methods: {
			async pinglun(){
				let res = await this.$request('mall/evaluation/list',{id:this.id,shopId:this.shopId})
				this.pinList = res.data
			},
			jiaruOrder() {
				
				let shopList = []
				shopList.push({
					fName: this.details.shopName,
					cart: [{
						shopId:this.shopId,
						productId: this.id,
						productNum: 1,
						productPrice: this.details.productPrice,
						productTotalPrice: this.details.productPrice,
						photoOssUrl: this.details.photoUrlId,
						productName: this.details.productName
					}]
				})
				uni.setStorageSync('shop', JSON.stringify(shopList))
				uni.navigateTo({
					url: '/pages/shop/shopDate/shopDate'
				})
			},
			async jiaruGouwuche() {
				let res = await this.$request('mall/car/list',{id:this.id,shopId:this.shopId})
				if (res.msg == '操作成功') {
					uni.showToast({
						title: '加入购物车成功',
						icon: 'success'
					})
				}
			},
			async creadDetails() {
				let res = await this.$request('mall/product/list',{id:this.id})
				this.details = res.data[0]
				this.list1 = res.data[0].photoUrlIdsList
				console.log(this.list1.length)
				this.spweiList = this.list1.length
				// let richtext = this.details.productDescribe
				// this.details.productDescribe = richtext.replace(/\<h1/gi, '<h1 style="text-indent: 0em;"')
				// 	.replace(/\<h2/gi, '<h2 style="text-indent: 0em;"')
				// 	.replace(/\<img/gi, '<img style="text-indent: 0em;width:100%;height:auto;display:block;"');
				this.show = true
			},
			change(e) {
				console.log(e)
				this.cont = e+1
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped>
	.ml-23 {
		margin-left: 46rpx;
	}

	.section_6 {
		margin-top: 24rpx;
		padding: 12rpx 24rpx;
		background-color: #ffffff;
		box-shadow: 0rpx -2rpx 8rpx #0000000d;
	}

	.image_18 {
		width: 30rpx;
		height: 30rpx;
	}

	.image_17 {
		width: 36rpx;
		height: 36rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.16rpx;
		color: #333333;
	}

	.text_13 {
		line-height: 22rpx;
	}

	.text_14 {
		line-height: 22.12rpx;
	}

	.text-wrapper_2 {
		padding: 24rpx 0;
		background-color: #ff6100;
		border-radius: 58rpx;
		height: 76rpx;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27.38rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.text_11 {
		line-height: 26.26rpx;
	}

	.text-wrapper_3 {
		padding: 24rpx 0;
		background-color: #2869fe;
		border-radius: 58rpx;
		width: 176rpx;
		height: 76rpx;
	}

	.text_12 {
		line-height: 26.1rpx;
	}

	.top_boxsamll {
		z-index: 999;
		position: absolute;
		left: 3%;
		margin-top: 2%;
	}

	.three_img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-top: 20rpx;
	}

	.three_tetxt {
		margin-top: 20rpx;
		width: 701rpx;
	}

	.three_time {
		font-size: 24rpx;
		color: #999;
	}

	.three_itemTopTile {
		font-size: 28rpx;
		margin-left: 15rpx;

	}

	.three_itemTopImg {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}

	.three_itemTop {
		width: 701rpx;
		display: flex;
		align-items: center;

	}

	.three_item {
		width: 701rpx;
		margin-left: 24rpx;
		margin-top: 30rpx;
	}

	.three_line {
		width: 4rpx;
		height: 24rpx;
		background-color: #2869FE;
		margin-right: 20rpx;
	}

	.three_title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.three_top {
		display: flex;
		align-items: center;
		margin-left: 32rpx;
		margin-top: 20rpx;
	}

	.three_flx {
		display: flex;
		font-size: 24rpx;
		color: #999999;
		align-items: center;
	}

	.three_box {
		width: 701rpx;
		margin-left: 24rpx;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: 600;
	}

	.three_Gigbox {
		width: 750rpx;

		background-color: #fff;
		margin-top: 30rpx;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}

	.two_desc {
		width: 702rpx;
		justify-content: space-between;
		font-size: 28rpx;
		color: #666666;
		margin-left: 24rpx;
		margin-top: 15rpx;
	}

	.two_title {
		width: 702rpx;
		margin-left: 24rpx;
	}

	.two_box {
		width: 750rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
		padding-top: 15rpx;
		padding-left: 20rpx;
	}

	.top_zifxl {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
		z-index: 9999;
	}

	.top_right {
		width: 120rpx;
		height: 72rpx;
		text-align: center;
		color: #fff;
		margin-right: 50rpx;
		font-size: 30rpx;
		font-weight: 600;

	}

	.yuanjia {
		font-size: 24rpx;
		margin-top: 15rpx;
	}

	.top_onetitle {
		font-size: 45rpx;
		font-weight: 600;
	}

	.top_oneQian {
		font-size: 30rpx;
		font-weight: 600;
	}

	.top_oneflx {
		display: flex;
		color: #fff;
		width: 350rpx;
		justify-content: space-between;
		height: 96rpx;
		align-items: center;
		margin-left: 30rpx;
	}

	.top_Img {
		width: 750rpx;
		height: 96rpx;
		position: absolute;
	}

	.top_one {
		width: 750rpx;
		height: 96rpx;
		position: relative;
	}

	.top_img {
		width: 750rpx;
		height: 750rpx;
		position: relative;
	}

	.top_chang {
		width: 84rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		background-color: #000000;
		opacity: 0.7;
		color: #fff;
		position: absolute;
		bottom: 5%;
		border-radius: 60rpx;
		left: 45%;
	}
</style>